<template>
  <!-- 雷达图  图表必须给高和宽度-->
  <div id="main" ref="myDiv" class="radar-echart" />
</template>

<script>
// 导入 ecahrar包
// import * as echarts from 'echarts'
// // 指定一个dom 元素来显示图标
// var chartDom = document.getElementById('main')
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。

// 一下是按需引入节约占内存
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { RadarChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import { LegendComponent, TitleComponent } from 'echarts/components'
// 标签自动布局、全局过渡动画等特性
// import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'
// 注册必须的组件
echarts.use([LegendComponent, RadarChart, CanvasRenderer, TitleComponent])

export default {
  data() {
    return {
      // 设置文本为红色

      option: {
        title: {
          text: '基础雷达图'
        },
        legend: {
          data: ['平均水平', '个人价值']
        },
        radar: {
          // shape: 'circle',

          indicator: [
            { name: '考勤', max: 4668 },
            { name: '工资', max: 16000 },
            { name: '社保', max: 30000 },
            { name: '工作效率', max: 38000 },
            { name: '知识分享', max: 52000 },
            { name: '代码行数', max: 25000 }
          ]
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',

            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: '平均水平'
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: '个人价值'
              }
            ]
          }
        ]
      }
    }
  },
  created() {},
  mounted() {
    var chartDom = this.$refs.myDiv
    // 初始化dom init
    var myChart = echarts.init(chartDom)
    this.option && myChart.setOption(this.option)
  }
}
// // 完整加载过程
// // import * as echarts from 'echarts'
// // 按需加载
// import * as echarts from 'echarts/core' // 引入主模块
// import { RadarChart } from 'echarts/charts' // 引入雷达图
// // 引入提示框和标题组件
// import {
//   TitleComponent,
//   TooltipComponent,
//   LegendComponent
// } from 'echarts/components'
// // 引入canvas渲染器
// import { CanvasRenderer } from 'echarts/renderers'
// // 注册必须的组件
// echarts.use([
//   TitleComponent,
//   TooltipComponent,
//   LegendComponent,
//   RadarChart,
//   CanvasRenderer
// ])

// export default {
//   // 页面渲染完毕事件
//   mounted() {
//     const myChart = echarts.init(this.$refs.myDiv) // 得到图表实例
//     myChart.setOption({
//       title: {
//         text: '基础雷达图'
//       },
//       tooltip: {},
//       legend: {
//         data: ['平均水平', '个人价值']
//       },
//       radar: {
//         // shape: 'circle',
//         name: {
//           textStyle: {
//             color: '#fff',
//             backgroundColor: '#999',
//             borderRadius: 3,
//             padding: [3, 5]
//           }
//         },
//         indicator: [
//           { name: '工作效率', max: 100 },
//           { name: '考勤', max: 100 },
//           { name: '积极性', max: 100 },
//           { name: '帮助同事', max: 100 },
//           { name: '自主学习', max: 100 },
//           { name: '正确率', max: 100 }
//         ]
//       },
//       series: [
//         {
//           name: '平均 vs 个人',
//           type: 'radar',
//           // areaStyle: {normal: {}},
//           data: [
//             {
//               value: [80, 80, 80, 80, 80, 80],
//               name: '平均水平'
//             },
//             {
//               value: [90, 75, 95, 90, 95, 90],
//               name: '个人价值'
//             }
//           ]
//         }
//       ]
//     })
//   }
// }
//
</script>

<style>
.radar-echart {
  width: 500px;
  height: 400px;
}
</style>
